<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <title>个人商品详情</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="format-detection" content="telephone=no">
    <link rel="stylesheet" href="/css/see/reset.min.css">
    <link rel="stylesheet" href="/plugins/swiper/swiper4.2.min.css">
    <link rel="stylesheet" href="/css/see/userGoodsInfo.min.css?v=<%=$version%>">
</head>
<body>
<div id="userGoodsInfo" v-cloak>
    <div class="goodsDetails-header clearfix" v-if="!isTop">
        <span class="goodsDetails-gobk" @click="getBack()"></span>
        <span class="goodsDetails-fx" @click="getShare()"></span>
    </div>
    <div class="goodsDetails-InfoTitle" v-if="isTop">
        <span class="goback" @click="getBack()"></span>
        <!--<strong :class="{active:isShow==1}" @click="getGoodsTab(1)">商品</strong>-->
        <!--<strong class="ml3" :class="{active:isShow==2}" @click="getGoodsTab(2)">详情</strong>-->
        <!--<strong :class="{active:isShow==3}" @click="getGoodsTab(3)">评价</strong>-->
        <span class="discount-spsre" @click="getShare()"></span>
    </div>
    <aside class="purchase-slider">
        <div class="swiper-container" v-if="productById.images&&productById.images.length>0">
            <div class="swiper-wrapper">
                <div class="swiper-slide" v-for="item in productById.images">
                    <img :src="item.imgSrc" class="lazy">
                </div>
                <!--<div class="swiper-slide">-->
                <!--<img data-src="/imgs/happyi/index/bpic1.png" class="swiper-lazy">-->
                <!--</div>-->
            </div>
            <!-- Add Pagination -->
            <div class="swiper-pagination"></div>
        </div>
    </aside>
    <div class="goodsDetails-top">
        <div class="goodsDetails-topMeney">
            <span class="topMeney-icon">&yen;{{integral}}</span>
        </div>
        <div class="goodsDetails-topTitle">
            <h6>{{productById.title}}</h6>
            <p>北京<span v-if="productById.freight==0">包邮</span><span v-else>{{productById.freight}}</span></p>
        </div>
        <div class="goodsDetails-topOther">已选择：{{specName}}&nbsp;<span v-if="colorName||specName">x&nbsp;{{number}}</span><span class="purchase-more2" @click="isDisplay()"></span></div>
    </div>
    <div class="userGoodsInfo-user">
        <span :style="bgimg(user.headImg)"></span>
        <h6>{{user.name}}</h6>
        <p>{{user.loginTime}}登陆</p>
        <strong class="purchase-more2"></strong>
    </div>
    <div class="userGoodsInfo-cent">
        <div class="userGoodsInfo-title">商品详情</div>
        <div class="userGoodsInfo-info" v-if="productById.descript" v-html="productById.descript"></div>
    </div>
    <div class="goodsDetails-butt">
        <!--<span class="goodsDetails-mak"></span>-->
        <span class="goodsDetails-headImg" @click="getNext(2)">
            <strong :style="bgimg(user.headImg)"></strong>
        </span>
        <strong class="goodsDetails-lt"></strong>
        <span class="goodsDetails-cuwux" @click="getNext(1)"></span>
        <span class="goodsDetails-news">{{cartCountNum}}</span>
        <a class="goodsDetails-buttBtn" @click="addCart()">加入购物车</a>
    </div>
    <div id="mask" :class="{'maskShow':isClassify||isShare}"></div>
    <div class="goodsDetails-choice" v-show="isClassify">
        <span class="goodsDetails-choiceBtn" @click="isDisplay()">×</span>
        <div class="choice-top clearfix">
            <strong :style="bgimg(imgSrc)"></strong>
            <p class="choice-topmt">价格：<span class="purchase-mons">&yen;{{integral}}</span></p>
            <p>已选：{{specName}}</p>
        </div>
        <div class="goodsDetails-choiceCent">
            <!--<div class="choice-cent">-->
                <!--<p>颜色</p>-->
                <!--<span v-for="item in productById.colors" :class="{'active':colorId==item.productColorId}" @click="getInfo(1,item)">{{item.name}}</span>-->
            <!--</div>-->
            <div class="choice-cent">
                <p>规格</p>
                <span v-for="item in productById.skus" :class="{'active':skuId==item.skuId}" @click="getInfo(item)">{{item.model}}</span>
            </div>
            <div class="choice-butt">
                <p>购买数量</p>
                <div class="choice-buttDiv clearfix ">
                    <span class="choice-buttBtn1" @click="getReduce()">－</span>
                    <input type="number" name="num" v-model="number">
                    <!--{{number}}-->
                    <span class="choice-buttBtn2" @click="getAdd()">＋</span>
                </div>
            </div>
        </div>
    </div>
    <div id="maskBox" :class="{'maskShow':isShare}">
        <div class="maskBox-top">分享到</div>
        <div class="maskBox-cent">
            <span class="maskBox-icon" @click="getChoice(1)">好友</span>
            <!--<span class="maskBox-icon1" @click="getChoice(2)">圈子</span>-->
        </div>
        <div class="maskBox-btn" @click="getShare()">取消</div>
    </div>
    <prompt-view ref="prompt"></prompt-view>
</div>
<script src='/plugins/js/jquery-1.11.3.min.js'></script>
<script type="text/javascript" src="/plugins/js/vue.min.js"></script>
<script type="text/javascript" src="/plugins/js/jquery.lazyload.min.js"></script>
<script type="text/javascript" src="/plugins/swiper/swiper.min.4.2.js"></script>
<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.6&key=589381d73924ac781b542765046f3235&plugin=AMap.CitySearch"></script>
<script type="text/javascript" src="/js/see/remogeo.js"></script>
<script type="text/javascript" src="/js/see/userGoodsInfo.js?v=<%=$version%>"></script>
<script>
    var swiper1 = new Swiper(".purchase-slider .swiper-container",{
        spaceBetween: 30,
        centeredSlides: true,
        // autoplay: {
        //     delay: 2500,
        //     disableOnInteraction: false
        // },
        pagination: {
            el: '.swiper-pagination',
            type: 'fraction'
        },
        lazy: {
            loadPrevNext: true,
            loadPrevNextAmount: 2
        },
        observer: true,//修改swiper自己或子元素时，自动初始化swiper
        observeParents: true//修改swiper的父元素时，自动初始化swiper
    });
    $("img.lazy").lazyload();
</script>
</body>
</html>